<template>
  <div class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#ffffff"
          class="el-menu-vertical"
          default-active="1"
          text-color="#1a202c"
          router
        >
        <div class="box">
          <img src="../../assets/1.png" alt="cw" style="width: 100%; height: 100%;" />
        </div>
        <el-menu-item index="/home/page1">
            <span>大数据统计界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page2">
            <span>表白信箱管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page3">
            <span>礼物店铺管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page4">
            <span>表白礼物订单管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page5">
            <span>礼物投诉处理</span>
          </el-menu-item>
          <el-menu-item index="/home/page6">
            <span>个人信息界面</span>
          </el-menu-item>
          <el-menu-item index="/">
            <span>确认退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

     <!-- 主内容区 -->
  <el-main>
    <div class="bigbox">
      <router-view></router-view>
    </div>
  </el-main>
    </el-container>
  </div>


</template>

<script setup>

</script>

<style scoped>
.home-container {
  height: 100vh;
  background: linear-gradient(145deg, #fff0f5 0%, #ffe4e1 100%); /* 浅粉渐变背景 */
}

.el-menu-vertical {
  height: 100%;
  background: rgba(255, 240, 245, 0.98) !important; /* 粉白透明背景 */
  border-right: 1px solid rgba(214, 51, 132, 0.15); /* 粉紫边框 */
}

.el-aside {
  background: linear-gradient(160deg, #ffb6c1 30%, #ff69b4 100%); /* 粉红渐变 */
  box-shadow: 4px 0 15px rgba(231, 76, 153, 0.1); /* 粉紫阴影 */
}

.el-main {
  padding: 20px;
  background: rgba(255, 250, 250, 0.97); /* 雪白背景 */
}

.bigbox{
  background: transparent;
  box-shadow: 0 4px 30px rgba(214, 51, 132, 0.08); /* 粉紫透明阴影 */
}

.box{
  background: linear-gradient(145deg, #d63384 0%, #8a2be2 100%); /* 粉紫渐变 */
  box-shadow: 0 4px 6px rgba(216, 51, 132, 0.15);
}

/* 菜单项 */
.el-menu-item {
  margin: 8px 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-menu-item:hover {
  background: rgba(214, 51, 132, 0.1) !important; /* 粉紫透明 */
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, #d63384 0%, #8a2be2 100%) !important; /* 粉紫渐变 */
  color: white !important;
  box-shadow: 0 4px 6px rgba(216, 51, 132, 0.15);
  position: relative;
}

/* 文字样式 */
.el-menu-item span {
  color: #8b008b; /* 深粉紫色 */
  font-weight: 600;
  letter-spacing: 0.5px;
}

.el-menu-item.is-active span {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 新增浪漫元素 */
.el-menu-item::after {
  content: '💖';
  position: absolute;
  right: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.el-menu-item:hover::after {
  opacity: 1;
}
</style>